<template>
    <div id="give-comment">
        <el-row>
            <el-col :lg="{span:24}"><slot></slot></el-col>
            <el-col :lg="{span:3,offset:1}" class="header-photo">
                <!-- 点击头像上传图片  -->
                <div class="photo-file">
                    <el-upload
                            :action="action"
                            multiple
                            :data="flag"
                            :on-success="refreshFlag"
                            :show-file-list="false"
                            :disabled="isButtonDis"
                            :before-upload="checkFile"
                            :limit="5">
                        <div class="block">
                            <!--<el-avatar :size="50" :src="photoSource"></el-avatar>-->
                            <el-avatar :size="50" :src="defaultHeader"></el-avatar>
                        </div>
                    </el-upload>
                </div>

            </el-col>
            <el-form>
                <el-col :lg="{span:16}" class="comment-content">
                    <el-input type="textarea" v-model="commentContent" :autosize="inputsize" resize="none"></el-input>
                </el-col>
                <el-col :lg="{span:3,offset:1}" class="comment-button">
                    <el-button type="primary" @click="sendMessage(receiveUrl)">发表</el-button>
                </el-col>
            </el-form>
        </el-row>
    </div>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "give-comment",
        props: {
            inputsize:{
                default(){
                    return {minRows: 2, maxRows: 2}
                }
            },
            action:{
                //后台图片处理url
                default(){
                    return ''
                }
            },
            receiveUrl:{
                //提交文本框内容后端处理url
                default(){
                    return ''
                }
            },
            slotMessage:{
                //附加处理，如标题
                default(){
                    return 'null'
                }
            },
            giveComment:{
                //接收待发送对象名
                default(){
                    return {}
                }
            }
        },
        data(){
            return {
                photoSource:'http://localhost:8080/img/header/default.jpg',
                commentContent:'',
                flag:{flag:"first",
                userName:window.localStorage['username']},//用于标记第一次上传，获取后得到文件夹路径名
                photoList:[],//存储已上传图片文件名
                isButtonDis:true,
				defaultHeader:require('@/assets/header/user.jpg')
            }
        },
        computed:{
          userName:function () {
              return window.localStorage['username'];
          }
        },
        mounted(){
            for(let i in this.giveComment){
                if(i == 'basicUrl')
                    this.isButtonDis = false;
            }
        },
        methods:{
            sendMessage(url){
                if(this.slotMessage == ''){
                    return;
                }
                if(this.commentContent == ''){
                    this.$message("您还未输入任何评论！");
                    return;
                }
                let tempStore = [this.commentContent,this.userName,this.slotMessage,this.flag.flag];//将各变量存储于容器
                let num = 0;
                let isOne = 1;
                for(let varName in this.giveComment){
                    if(num == 2 && varName.indexOf('|')!=-1){
                        //说明存在多个附加参数
                        isOne = 0;
                        let tempName = varName.split('|');
                        this.$delete(this.giveComment,varName);
                        let tempVar = this.slotMessage.split('|');
                        for(let n=0;n<tempName.length;n++){
                            this.giveComment[tempName[n]] = tempVar[n];
                        }
                        break;
                    }
                    num++;
                }
                num = 0;
                for(let varName in this.giveComment)
                {
                    if(isOne==0 && num==2){
                        break;
                    }
                    this.giveComment[varName] = tempStore[num++];
                }
				
				this.commentContent = '';
				this.$emit('send-success',this.giveComment);//发送成功回调父组件
            },
            checkFile(file){
                const isIMG =
                    file.type === 'image/jpg' ||
                    file.type === 'image/jpeg' ||
                    file.type === 'image/png'
                const isLt = file.size / 1024 / 2048 <= 1;
                if (!isIMG) {
                    this.$message.error('上传头像图片只支持jpg、jpeg、png格式!')
                }
                if (!isLt) {
                    this.$message.error('上传头像图片大小不能超过2MB!')
                }
                return isLt && isIMG
            },
            refreshFlag(response){
                this.flag.flag = response.split('|')[0];
                this.photoList.push(response.split('|')[1]);
                this.commentContent += '/IMG '+response.split('|')[1]+' IMG/';
            },
            selectImg(){
                //判断文本内的img
                for(let i=0;i<this.photoList.length;i++){
                    let result = this.commentContent.match(this.photoList[i]);
                    if(result == null){
                        this.photoList.splice(this.photoList.indexOf(this.photoList[i]),1);
                    }
                }
            }
        }
    }
</script>

<style scoped>
#give-comment{
    background-color: white;
    border-radius: 6px;
    padding-bottom: 20px;
}
#give-comment .el-row{
    height: 100%;
}
.header-photo{
    margin-top: 20px;
}
.header-photo .block{
    text-align: center;
}
.comment-content{
    margin-top: 20px;
}

.comment-button{
    margin-top: 25px;
}
.photo-file{
    margin-left: -32px;
}
.block{
    margin-left: 32px;
}

@media only screen and (max-width: 767px){
	#give-comment{
		padding-bottom:0;
	}
	.photo-file{
	    margin-left: 38%;
	}
	.comment-button{
		margin-top: 0;
	}
	.comment-button > button{
	    width: 100%;
	}
}
@media screen and (max-width: 450px) {
	.block{
	    margin-left: 30%;
	}
}
</style>